{/* original from https://github.com/beerose/theme-ui-sketchy/blob/master/src/components/components.mdx */}

import { useTheme } from '@emotion/react'
import {
  Message,
  NavLink,
  Divider,
  Container,
  Box,
  Button,
  Card,
  Text,
  Paragraph,
  Image,
  Slider,
  Label,
  Flex,
  Checkbox,
  Select,
  Textarea,
  Radio,
  Input,
  Link,
  Progress,
  Badge,
  Alert,
} from 'theme-ui'

export const Radii = () => {
  const theme = useTheme()
  if (typeof theme.radii === 'object') {
    return (
      <>
        <Divider />
        <h2>Borders</h2>
        <Flex sx={{ flexWrap: 'wrap' }}>
          {Object.keys(theme.radii).map((key) => (
            <Box
              key={`border_${key}`}
              p={3}
              m={2}
              color="text"
              bg="muted"
              sx={{
                border: '2px solid black',
                borderRadius: { key },
                minWidth: '100px',
              }}
            >
              {key}
            </Box>
          ))}
        </Flex>
      </>
    )
  }
  return null
}

# Example components

<Radii />

export const Buttons = () => {
  const theme = useTheme()
  if (typeof theme.buttons === 'object') {
    return (
      <>
        <Divider />
        <h2>Buttons</h2>
        <Flex sx={{ flexWrap: 'wrap' }}>
          {Object.keys(theme.buttons).map((key) => (
            <Button key={`button_${key}`} variant={key} m={10}>
              {key}
            </Button>
          ))}
        </Flex>
      </>
    )
  }
  return null
}

<Buttons />

---

## Form elements

<Box
  as="form"
  pb={3}
  onSubmit={(e) => e.preventDefault()}
  sx={{ width: '100%', maxWidth: '500px' }}
>
  <Label htmlFor="username">Username</Label>
  <Input id="username" mb={3} />
  <Label htmlFor="password">Password</Label>
  <Input type="password" id="password" mb={3} />
  <Box>
    <Label mb={3}>
      <Checkbox />
      Remember me
    </Label>
  </Box>
  <Label htmlFor="sound">Sound</Label>
  <Select id="sound" mb={3}>
    <option>Beep</option>
    <option>Boop</option>
    <option>Blip</option>
  </Select>
  <Label htmlFor="comment">Comment</Label>
  <Textarea id="comment" rows="6" mb={3} />
  <Flex mb={3}>
    <Label>
      <Radio name="letter" /> Alpha
    </Label>
    <Label>
      <Radio name="letter" /> Bravo
    </Label>
    <Label>
      <Radio name="letter" /> Charlie
    </Label>
  </Flex>
  <Button>Submit</Button>
</Box>

---

## Links

<Box pb={20}>
  <Link href="#!">Hello</Link>
</Box>

export const Badges = () => {
  const theme = useTheme()
  if (typeof theme.badges === 'object') {
    return (
      <>
        <Divider />
        <h2>Badges</h2>
        <Flex sx={{ flexWrap: 'wrap' }}>
          {Object.keys(theme.badges).map((key) => (
            <Badge key={`button_${key}`} variant={key} m={10}>
              {key}
            </Badge>
          ))}
        </Flex>
      </>
    )
  }
  return null
}

<Badges />

export const Alerts = () => {
  const theme = useTheme()
  if (typeof theme.alerts === 'object') {
    return (
      <>
        <Divider />
        <h2>Alerts</h2>
        <Flex sx={{ flexDirection: 'column' }}>
          {Object.keys(theme.alerts).map((key) => (
            <Alert key={`button_${key}`} variant={key} m={10}>
              {key}
            </Alert>
          ))}
        </Flex>
      </>
    )
  }
  return null
}

<Alerts />

---

## Navigation

<Box pb={20}>
  <Flex as="nav">
    <NavLink href="#!" p={2}>
      Home
    </NavLink>
    <NavLink href="#!" p={2}>
      Blog
    </NavLink>
    <NavLink href="#!" p={2}>
      About
    </NavLink>
  </Flex>
</Box>

---

## Table

<table style={{ paddingBottom: 20 }}>
  <thead>
    <tr>
      <th colSpan="2">The table header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>The table body</td>
      <td>with two columns</td>
    </tr>
  </tbody>
</table>

---

## Card

<Card
  mb={5}
  sx={{
    maxWidth: 400,
    padding: '30px',
  }}
>
  <Paragraph>
    Cupcake ipsum dolor sit amet chocolate bar. Apple pie macaroon muffin jelly
    candy cake soufflé muffin croissant. Gummies jelly beans cotton candy
    fruitcake. Wafer lemon drops soufflé cookie. Sesame snaps fruitcake
    cheesecake danish toffee marzipan biscuit.
  </Paragraph>
</Card>

---
